<template>
  <div id="temp">
    <!--1.首页-->
    <mt-header fixed title="典型风采"></mt-header>
    <!--2.选项卡-->
    <div id="tempTitle">
      <ul class="tabs clearfix">
        <li v-for="(tab,index) in tabsName">
          <span class="tab-link" @click="tabsSwitch(index)"
                v-bind:class="{active:tab.isActive}">{{tab.name}}</span>
        </li>
      </ul>
    </div>
    <div class="cards">
      <!--第一块内容-->
      <div class="tab-card" style="display: block;">
        <div class="cards">
          <div class="tab-body honour-tab-body">
            <ul class="date-ul">
              <li>
                <!--<h3>{{te}}</h3>-->
                <h3>--2018年7月--</h3>
                <ul class="person-ul">
                  <li v-for="val in list" @click="link(val)">
                    <div>
                      <!--<span>{{val.title}}</span>-->
                      <span>王小明</span>
                      <!--<em>{{val.title}}</em>-->
                      <em>香洲区党支部</em>
                      <!--<img :src="val.img_url"/>-->
                      <img src="../../../statics/imgs/images/img.jpg" alt="">
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--第二内容-->
      <div class="tab-card">
        <div class="cards">
          <div class="tab-body honour-tab-body">
            <ul class="date-ul">
              <li>
                <!--<h3>{{te}}</h3>-->
                <h3>--2018年8月--</h3>
                <ul class="person-ul">
                  <li v-for="valList in listBranch" @click="linkBranchList(valList)">
                    <div>
                      <!--<span>{{val.title}}</span>-->
                      <span>王大名</span>
                      <!--<em>{{val.title}}</em>-->
                      <em>香洲区党支部</em>
                      <!--<img :src="val.img_url"/>-->
                      <img src="../../../statics/imgs/images/img.jpg" alt="">
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
      <!--第三内容-->
      <div class="tab-card">
        <div class="cards">
          <div class="tab-body honour-tab-body">
            <ul class="date-ul">
              <li>
                <!--<h3>{{te}}</h3>-->
                <h3>--2018年9月--</h3>
                <ul class="person-ul">
                  <li v-for="valDistrictList in listBranch" @click="linkDistrictList(valDistrictList)">
                    <div>
                      <!--<span>{{val.title}}</span>-->
                      <span>王大大</span>
                      <!--<em>{{val.title}}</em>-->
                      <em>香洲区党支部</em>
                      <!--<img :src="val.img_url"/>-->
                      <img src="../../../statics/imgs/images/img.jpg" alt="">
                    </div>
                  </li>
                </ul>
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
  //     按需导入访问错误
  import {Toast} from 'mint-ui';
  import kit from '../../kits/apikit.js'

  export default {
    data() {
      return {
        list: [],
        te: this.te,
        listBranch: [],
        listDistrict: [],
        tabsName: [{
          name: "最美身边人",
          isActive: true
        }, {
          name: "执法标兵",
          isActive: false
        }, {
          name: "文明使者",
          isActive: false
        }],
        active: false
      }
    },
    created() {
      this.getactitylist();
      this.getBranchList();
      this.getDistrictList();
    },
    methods: {
      //最美身边人
      link(item) {
        console.log(item);
        this.$router.push({
          path: "/jdfc/fairnessBranch/",
          query: {
            id: item.id
          }
        })
      },
      getactitylist() {
        var url = kit.apikit + 'type=getnewslist';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.list = body.message;
          this.te = body.message[0].click;
          console.log(this.list);
        });
      },
      //执法标兵
      getBranchList() {
        var url = kit.apikit + 'type=getnewslist';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.listBranch = body.message;
        });
      },
      linkBranchList(item) {
        console.log(item);
        this.$router.push({
          path: "/jdfc/modelBranch/",
          query: {
            id: item.id
          }
        })
      },
      //文明使者
      getDistrictList() {
        var url = kit.apikit + 'type=getnewslist';
        this.$http.get(url).then(function (res) {
          var body = res.body;
          if (body.status != 0) {
            Toast(body.messge);
            return;
          }
          this.listDistrict = body.message;
        });
      },
      linkDistrictList(item) {
        console.log(item);
        this.$router.push({
          path: "/jdfc/civilizationBranch/",
          query: {
            id: item.id
          }
        })
      },
      //选项卡
      tabsSwitch: function (tabIndex) {
        var tabCardCollection = document.querySelectorAll(".tab-card"),
          len = tabCardCollection.length;
        for (var i = 0; i < len; i++) {
          tabCardCollection[i].style.display = "none";
          this.tabsName[i].isActive = false;
        }
        this.tabsName[tabIndex].isActive = true;
        tabCardCollection[tabIndex].style.display = "block";
      }
    }
  }
</script>
<style scoped>
  /*头部样式*/
  .mint-header {
    height: .9rem;
    background-color: #4284D8;
    font-size: .35rem;
  }

  /*选项卡样式*/
  #tempTitle {
    position: fixed;
    top: 45px;
    left: 0;
    width: 100%;
    height: .9rem;
    background-color: #fff;
    z-index: 33;
  }

  .tabs li {
    float: left;
    list-style: none;
    width: 33.33%;
  }

  .tabs .tab-link {
    display: block;
    width: 100%;
    height: 49px;
    text-align: center;
    line-height: 49px;
    color: #808080;
    text-decoration: none;
  }

  .tabs .tab-link.active {
    height: 47px;
    border-bottom: 2px solid #EC542E;
    color: #EC542E;
    transition: .3s;
  }

  .cards {
    float: left;
    width: 100%;
    margin-top: 1rem;
  }

  .cards .tab-card {
    display: none;
  }

  .clearfix:after {
    content: "";
    display: block;
    height: 0;
    clear: both;
  }

  /*下面内容*/
  .temBranch {
    margin-top: -2.5rem;
  }

  .listBranch {
    margin-top: -1.5rem;
  }

  .listDistrict {
    margin-top: -1.5rem;
  }

  .isState {
    background-color: #cccccc;
    color: #ffffff;
    border-radius: 1.5px;
    padding: 1px 2px;
    font-size: .2rem;
  }

  /*2.图片大小*/
  .mui-table-view img {
    height: 80px;
    width: 80px;

  }

  .mui-table-view .mui-media-object {
    max-width: 80px;
    line-height: 80px;
  }

  .ft {
    margin-top: 1.5em;
    font-size: 10px;
    color: #AEAEAE;

  }

  .click {
    float: right;
  }

  .date-ul {
    margin-top: -2.6rem;
  }
</style>
